<template>
	<div class="projectHeader-container">
		<div class="projectHeader-content">
			<h1><a href="#">网易云音乐</a></h1>
			<ul @click="changeSelect">
				<li id="0" class="active">发现音乐<em class="active"></em></li>
				<li id="1">我的音乐<em></em></li>
				<li id="2">关注<em></em></li>
				<li id="3">商城<em></em></li>
				<li id="4">音乐人<em></em></li>
				<li id="5" class="projectHeader-download">
					下载客户端<i class="projectHeader-iconHot"></i>
					<em></em>
				</li>
			</ul>
			<div class="projectHeader-searchContainer">
				<i class="projectHeader-iconSearch"></i>
				<input type="text" placeholder="音乐/视频/电台/用户" />
			</div>
			<button class="projectHeader-creatorCenter">创作者中心</button>
			<div class="projectHeader-userContainer">
				<a
					href="#"
					class="projectHeader-login"
					@click="isShow"
					v-if="!userPhoto"
					>登录</a
				>
				<img
					class="projectHeader-userPortrait"
					:src="userPhoto"
					v-if="userPhoto"
				/>
				<div class="projectHeader-loginedContainer" v-if="userPhoto">
					<ul>
						<li><i></i>我的主页</li>
						<li><i></i>我的消息</li>
						<li><i></i>我的等级</li>
						<li><i></i>VIP会员</li>
						<li><i></i>个人设置</li>
						<li><i></i>实名认证</li>
						<li @click="logout"><i></i>退出</li>
					</ul>
				</div>
			</div>
			<!-- <a href="#" class="projectHeader-login" @click="isShow" v-if="!userPhoto">登录</a>
			<img class="projectHeader-userPortrait" :src="userPhoto" v-if="userPhoto">
			<div class="projectHeader-loginedContainer" v-if="userPhoto">
				<ul>
					<li><i></i>我的主页</li>
					<li><i></i>我的消息</li>
					<li><i></i>我的等级</li>
					<li><i></i>VIP会员</li>
					<li><i></i>个人设置</li>
					<li><i></i>实名认证</li>
					<li><i></i>退出</li>
				</ul>
			</div> -->
		</div>
	</div>
	<div
		:class="
			isShowData
				? 'projectHeader-bottom-container'
				: 'projectHeader-bottom-container noneData'
		"
	>
		<div class="projectHeader-bottom-content" v-if="isShowData">
			<ul @click="changeToSelect">
				<router-link to="/"><li id="0" class="active"><span>推荐</span></li></router-link>
				<router-link to="rankinglist"><li id="1"><span>排行榜</span></li></router-link>
				<router-link to="songlist"><li id="2">
					<span>歌单<i class="projectHeader-bottom-iconR"></i></span>
				</li></router-link>
				<router-link to="anchorstation"><li id="3"><span>主播电台</span></li></router-link>
				<router-link to="singer"><li id="4"><span>歌手</span></li></router-link>
				<router-link to="newdisc"><li id="5"><span>新碟上架</span></li></router-link>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: "discoverMusic",
};
</script>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import request from "../../utils/request";

const store = useStore();

const route = useRoute();

// 存放用户头像的变量
let userPhoto = ref("");

watch(store.state.app.user, async () => {
	const uid = store.state.app.user.id;
	// 判断更新时有无id防止是登出操作修改user数据
	if (uid) {
		const result = await request(
			`http://localhost:3000/user/detail?uid=${uid}`
		);
		userPhoto.value = result.profile.avatarUrl;
	}
});

// 加载时判断路径判断是否显示二级菜单数据
onMounted(async () => {
	if (route.path !== "/") {
		isShowData.value = false;
	}
	if (localStorage.getItem("user")) {
		const uid = JSON.parse(localStorage.getItem("user")).id;
		const result = await request(
			`http://localhost:3000/user/detail?uid=${uid}`
		);
		userPhoto.value = result.profile.avatarUrl;
	}
});

// 判断projectHeader-bottom中是否显示数据的flag
const isShowData = ref(true);
// 当前选择的选项id
const nowCheckOption = ref(0);

const nowCheckToOption = ref(0);

// 点击登录
const isShow = () => {
	store.dispatch("app/isloginshow", true);
};

// 点击登出
const logout = async () => {
	store.dispatch("app/logout");
	userPhoto.value = "";
};

// 点击一级路由选项更改选时的回调函数
const changeSelect = (event) => {
	const fatherNode = event.target.parentNode;
	// 将当期设置active的node元素中的类名去除
	fatherNode.childNodes[nowCheckOption.value].className = "";
	fatherNode.childNodes[nowCheckOption.value].lastChild.className = "";
	// 获取当前点击的node元素并给予active类名
	const nowNode = event.target;
	nowNode.className = "active";
	nowNode.lastChild.className = "active";
	// 记录本次点击的node元素id
	nowCheckOption.value = nowNode.id;
};

// 点击二级菜单时的回调函数
const changeToSelect = (event) => {
	// 判断当前点击的是li还是span
	let parentNode = "";
	let nowNode = "";
	if (event.target.nodeName === "SPAN") {
		parentNode = event.target.parentNode.parentNode.parentNode;
		nowNode = event.target.parentNode;
	}
	if (event.target.nodeName === "LI") {
		parentNode = event.target.parentNode.parentNode;
		nowNode = event.target;
	}

	// 将当期设置active的node元素中的类名去除
	parentNode.childNodes[nowCheckToOption.value].childNodes[0].className = "";

	// // 获取当前点击的node元素并给予active类名
	nowNode.className = "active";

	// // 记录本次点击的node元素id
	nowCheckToOption.value = nowNode.id;
};
</script>

<style scoped>
.projectHeader-container {
	height: 70px;
	width: 100%;
	background-color: #242424;
}
.projectHeader-content {
	margin: 0 auto;
	height: 100%;
	width: 1100px;
	display: flex;
	align-items: center;
}
.projectHeader-content > h1 {
	height: 100%;
	width: 157px;
	margin-right: 20px;
	font-size: 0;
	background-image: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?eb8a621d1972cfbcd8dd34d2beeb79e1);
}
.projectHeader-content > h1 > a {
	display: inline-block;
	height: 100%;
	width: 100%;
}
.projectHeader-content > ul {
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 14px;
}
.projectHeader-content > ul > li {
	padding: 0 19px;
	height: 100%;
	line-height: 70px;
	color: rgb(204, 204, 204);
	list-style: none;
	text-align: center;
	position: relative;
}
.projectHeader-content > ul > li:hover {
	background: #000;
	color: #fff;
	cursor: pointer;
}
.projectHeader-content > ul > li.active {
	background: #000;
}
.projectHeader-content > ul > li > em.active {
	position: absolute;
	display: inline-block;
	width: 12px;
	height: 7px;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?eb8a621d1972cfbcd8dd34d2beeb79e1)
		no-repeat 0 9999px;
	background-position: -226px 0;
}
.projectHeader-iconHot {
	position: absolute;
	top: 21px;
	left: 100px;
	display: block;
	width: 28px;
	height: 19px;
	background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?eb8a621d1972cfbcd8dd34d2beeb79e1)
		no-repeat 0 9999px;
	background-position: -190px 0;
}
.projectHeader-download {
	position: relative;
}
.projectHeader-searchContainer {
	margin-left: 100px;
	display: flex;
	align-items: center;
	height: 32px;
	width: 158px;
	line-height: 32px;
	border-radius: 32px;
	background-color: white;
}
.projectHeader-searchContainer > input {
	width: 120px;
	outline: none;
	border: 0;
}
.projectHeader-iconSearch {
	display: inline-block;
	margin-left: 5px;
	line-height: 32px;
	height: 20px;
	width: 20px;
	background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?eb8a621d1972cfbcd8dd34d2beeb79e1)
		no-repeat 0 9999px;
	background-position: -6px -104px;
}
.projectHeader-creatorCenter {
	margin-left: 20px;
	width: 90px;
	height: 32px;
	border: 1px solid #4f4f4f;
	color: #ccc;
	background-color: #242424;
	border-radius: 20px;
	font-size: 12px;
}
.projectHeader-creatorCenter:hover {
	color: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
}
.projectHeader-userPortrait {
	margin-left: auto;
	width: 30px;
	height: 30px;
	border-radius: 30px;
}
.projectHeader-userContainer {
	margin-left: auto;
	position: relative;
}
.projectHeader-userContainer:hover .projectHeader-loginedContainer ul {
	display: block;
}
.projectHeader-loginedContainer {
	position: absolute;
	top: 40px;
	right: -79px;
	width: 158px;
	background: #2b2b2b;
	border: 1px solid #202020;
	box-shadow: 0 8px 24px 0 rgb(0 0 0 / 50%);
	border-radius: 4px;
	z-index: 99;
}
.projectHeader-loginedContainer > ul {
	margin-top: -10px;
	padding-top: 10px;
	color: rgb(204, 204, 204);
	font-size: 12px;
	display: none;
}
.projectHeader-loginedContainer > ul > li {
	display: flex;
	height: 34px;
	align-items: center;
	padding: 0 20px;
	cursor: pointer;
}
.projectHeader-loginedContainer > ul > li:hover {
	background-color: #4f4f4f;
	color: #f5f5f5;
}

.projectHeader-loginedContainer > ul > li:nth-of-type(4) {
	border-bottom: 1px solid #232323;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(6) {
	border-bottom: 1px solid #232323;
}
.projectHeader-loginedContainer > ul > li > i {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	background: url(https://s2.music.126.net/style/web2/img/frame/toplist.png?982e4b750ce32f77c36bfc196a0bc432)
		no-repeat 0 9999px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(1) > i {
	background-position: 0 -80px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(2) > i {
	background-position: -20px -120px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(3) > i {
	background-position: 0 -100px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(4) > i {
	background-position: 0 -221px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(5) > i {
	background-position: 0 -140px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(6) > i {
	background-position: -20px -142px;
}
.projectHeader-loginedContainer > ul > li:nth-of-type(7) > i {
	background-position: 0 -200px;
}
.projectHeader-login {
	color: #787878;
	font-size: 12px;
	text-decoration-line: none;
}
.projectHeader-login:hover {
	text-decoration-line: underline;
}
.projectHeader-bottom-container {
	width: 100%;
	height: 34px;
	background-color: #c20c0c;
	border-bottom: 1px solid #a40011;
}
.noneData {
	height: 5px;
}
.projectHeader-bottom-content {
	width: 1100px;
	height: 100%;
	margin: 0 auto;
}
.projectHeader-bottom-content  ul {
	margin-left: 180px;
	display: flex;
}
.projectHeader-bottom-content  ul  li {
	padding: 0 17px;
	height: 100%;
	line-height: 34px;
	cursor: pointer;
}
.projectHeader-bottom-content  ul  li  span {
	padding: 0 13px;
	height: 20px;
	border-radius: 20px;
	color: white !important;
}
.projectHeader-bottom-content  ul  li  span:hover {
	background-color: #9b0909;
}
.projectHeader-bottom-content  ul  li.active  span {
	background-color: #9b0909;
}
.projectHeader-bottom-iconR {
	transform: translateY(-5px);
	display: inline-block;
	width: 8px;
	height: 8px;
	background: url(https://s2.music.126.net/style/web2/img/white-r-icon@3x.png?8fd65dea5368f45b36ab6f045aeaa983);
	background-size: cover;
}

</style>
